<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3033722_ohr77f7gy3h.css">
    <style>
        .article{
            width: 300px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="app">
        <my-article>
            <template v-slot:header>
                <h2>Vue介绍</h2>
            </template>

            <!-- v-slot:default -->
            <template>
                Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                aaaaaaaaaaaaaaaa
            </template>
            
            <template v-slot:footer>
                <h2>作者: xxxx</h2>
            </template>

        </my-article>


        <my-article>
            <template #header>
                <h2>Vue介绍</h2>
            </template>

            <!-- #default -->
            <template #default>
                Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
                aaaaaaaaaaaaaaaa
            </template>
            
            <template #footer>
                <h2>作者: xxxx</h2>
            </template>

        </my-article>
    </div>
</body>
<template id="compB">
    <div class="article" :style="{color:color}">
        <div class="article-header">
            <slot name="header"></slot>
        </div>
        <div class="article-container">
            <!-- name="default" -->
            <slot></slot>
        </div>
        <div class="article-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>


<script>

    // 问题1. 组件内的按钮内容是死的 => 活的  => 传入一个属性来定义按钮内容
    // 问题2. 父组件传入的内容 可能是 text , html结构, 其他组件  => 通过属性结束 后期不好解析


    // 官方提供了插槽功能 => 在组件内使用<slot></slot>标签作为占位符, 

    // 命名插槽 
    // 1. 可以在组件内定义多个插槽 分别赋予不同的名字
    // 2. 父组件向子组件传递插槽内容时,也要对应名字区分

    Vue.component("MyArticle",{
        data(){
            return {
                color:"#666666"
            }
        },
        template:"#compB",
    })
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>